<template>
  <view class="u-page">
    <u-sticky >
      <u-tag :text="'任务总数：' + total" type="success"></u-tag>
    </u-sticky>

    <u-loading-icon :show="loading" text="加载中" textSize="18"></u-loading-icon>

    <u-modal :show="show" :title="title" showCancelButton confirmText="提交" @cancel="cancelForm"
             :showConfirmButton="confirmDisabled" @confirm="submitForm">
      <u--form :model="form" ref="uForm">
        <u-form-item label="编码">
          <u--input
              placeholder="请输入物料编码"
              border="surround"
              readonly
              v-model="form.invCode"
          ></u--input>
        </u-form-item>
        <u-form-item label="批次">
          <u--input
              placeholder="请输入批次号"
              border="surround"
              clearable
              v-model="form.batchNo"
          ></u--input>
        </u-form-item>
        <u-form-item label="计划">
          <u--input
              border="surround"
              readonly
              v-model="form.pqtys"
          ></u--input>
        </u-form-item>
        <u-form-item label="累计">
          <u--input
              border="surround"
              readonly
              v-model="form.offQtys"
          ></u--input>
        </u-form-item>
        <u-form-item label="提交">
          <u--input
              border="surround"
              clearable
              type="number"
              v-model="form.qty"
          ></u--input>
        </u-form-item>
      </u--form>
    </u-modal>
    <u-form :model="param" ref="uQueryForm">
      <u-form-item label="订单" >
        <u--input
            placeholder="请输入订单"
            border="surround"
            v-model="param.poCode"
            clearable
            @change="queryWorks"
        ></u--input>
      </u-form-item>
      <u-form-item label="订单" v-if="tempShow">
        <uni-data-select v-model="tempPoCode" placeholder="请选择订单" clearable
                         :localdata="poCodes" @change="changePoCodes"/>
      </u-form-item>
    </u-form>

    <u-list @scrolltolower="scrolltolower" :pagingEnabled="pagingEnabled" @scrollWithAnimation="true" :key="listKey">
      <u-list-item v-for="(item, index) in items" :key="index" class="custom-list-item" >
        <view @click="handleSubmit(item)">
          <u-cell :title="`订单号：${item.poCode}`"></u-cell>
          <u-cell :title="`物料编码：${item.invCode}`"></u-cell>
          <u-cell :title="`物料名称：${item.invName}`"></u-cell>
          <u-cell :title="`批次号：${item.batchNo? item.batchNo: ''}`"></u-cell>
          <u-cell :title="`库管员：${item.carrier? item.carrier: ''}`"></u-cell>
          <u-cell :title="`合并任务数：${item.count}   流水号：${index + 1}`"></u-cell>
          <u-cell :title="`计划下架数量：${item.pqtys}   已下架数量：${item.offQtys}`"></u-cell>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>
<script>
import UCell from "../../../../uview-ui/components/u-cell/u-cell.vue";
import UListItem from "../../../../uview-ui/components/u-list-item/u-list-item.vue";
import UList from "../../../../uview-ui/components/u-list/u-list.vue";
import {getPoCodes, pick, poCodePickList} from "../../../../api/work/wareHourse/poCodePick";
import UText from "../../../../uview-ui/components/u-text/u-text.vue";
import ULoadingPage from "../../../../uview-ui/components/u-loading-page/u-loading-page.vue";
import ULoadingIcon from "../../../../uview-ui/components/u-loading-icon/u-loading-icon.vue";
import UniDataSelect from "../../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import UModal from "../../../../uview-ui/components/u-modal/u-modal.vue";
import UInput from "../../../../uview-ui/components/u--input/u--input.vue";
import UFormItem from "../../../../uview-ui/components/u-form-item/u-form-item.vue";
import UForm from "../../../../uview-ui/components/u--form/u--form.vue";
import USticky from "../../../../uview-ui/components/u-sticky/u-sticky.vue";
import UTag from "../../../../uview-ui/components/u-tag/u-tag.vue";

export default {
  components: {
    UTag,
    USticky,
    UForm, UFormItem, UInput, UModal, UniDataSelect,
    ULoadingIcon,
    ULoadingPage,
    UText,
    UList,
    UListItem,
    UCell
  },
  data() {
    return {
      items: [],
      listKey: Date.now(),
      tempShow:false,
      tempPoCode: null,
      chooseFlag: false,
      poCodes: [],
      pagingEnabled: true,
      confirmDisabled: true,
      loading: false,
      total: 0,
      tempItem: null,
      show:false,
      title: '',
      form: {
        poCode: null,
      },
      param: {
        pageNum: 0,
        pageSize: 5,
        poCode: null,
      }
    }
  },
  onLoad(options) {
    if (options.poCode !== null) {
      this.param.poCode = options.poCode;
    }
    this.loadmore()
  },
  methods: {
    changePoCodes() {
      this.tempShow = false;
      this.param.poCode = this.tempPoCode;
      this.chooseFlag = true;
      this.items = [];
      this.param.pageNum = 0;
      this.loadmore();
    },
    queryWorks(query) {
      this.chooseFlag = false;
      this.poCodes = [];
      getPoCodes(query).then(response => {
        this.poCodes = response.data.map((data) => {
          return {
            value: data,
            text: data,
          }
        });
        this.tempShow = true;
      });
    },
    scrolltolower() {
      if (this.items.length >= this.total) {
        this.$modal.msgError("没有更多数据了");
        return;
      }
      // 计算最大页数
      let maxPage = Math.ceil(this.total / this.param.pageSize);
      if (maxPage === this.param.pageNum) {
        this.$modal.msgError("已到最后一页");
        return;
      }
      this.loadmore()
    },
    loadmore() {
      this.loading = true;
      this.param.pageNum = this.param.pageNum + 1;
      poCodePickList(this.param).then(res => {
        this.listKey = Date.now();
        this.total = res.total;
        if (res.rows.length > 0) {
          res.rows.forEach(item => this.items.push(item));
        } else {
          this.$modal.msg("没有下架任务！");
        }
        this.loading = false;
      });
    },
    resetForm(item) {
      this.form = {
        poCode: item.poCode,
        invCode: item.invCode,
        invName: item.invName,
        batchNo: item.batchNo,
        batchFlag:item.batchFlag,
        serialFlag:item.serialFlag,
        count: item.count,
        wptIds: item.wptIds,
        offQtys: item.offQtys,
        pqtys: item.pqtys,
        lcode: item.lcode,
        qty: (item.pqtys - item.offQtys)
      }
    },
    handleSubmit(item) {
      this.confirmDisabled = true;
      if (item.serialFlag) {
        this.$modal.msgError("序列号管理的物料暂不支持下架！");
        return;
      }
      this.show = true;
      this.resetForm(item);
      this.tempItem = item;
    },
    submitForm() {
      this.confirmDisabled = false;
      if (this.form.batchFlag && (this.form.batchNo === '' || this.form.batchNo === null)) {
        this.$modal.msgError("批次号管理的物料下架请输入批次号！");
        this.confirmDisabled = true;
        return;
      }
      if (!this.form.batchFlag && (this.form.batchNo !== '' && this.form.batchNo !== null)) {
        this.$modal.msgError("非批次号管理的物料不需要输入批次号！");
        this.confirmDisabled = true;
        return;
      }
      pick(this.form).then(res => {
        let index = this.items.indexOf(this.tempItem);
        if (index > -1) {
          this.items.splice(index, 1);
        }
        this.$modal.msgSuccess("下架成功！");
        this.total -= this.form.count;
        this.show = false;
        this.confirmDisabled = true;
        if (this.items.length === 0) {
          this.param.pageNum = 0;
          this.loadmore();
        }
      }).catch(() => {
        this.confirmDisabled = true;
      });
    },
    cancelForm() {
      this.show = false;
    }
  },
}
</script>
<style>
.custom-list-item {
  background-color: #ADD8E6;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}


</style>
